<template>
  <div class="content-container">
    <h1>表格填写</h1>
    <div class="top-btn-container">
      <el-button v-show="tableTemp" type="primary" @click="addOneRow">新增一行</el-button>
      <el-button v-show="tableTemp" type="primary" @click="saveTableData">保存</el-button>
      <el-button v-show="tableTemp" type="primary" @click="exportRecords">导出</el-button>
      <el-button v-show="tableTemp" type="primary" @click="goBack">返回列表</el-button>
    </div>
    <div id="operation-table-contaienr"></div>
  </div>
</template>

<script>
import randerTableUtil from '../util/RanderTabelUtil';
import downloadUtil from '../util/DownloadUtil';
export default {
  data() {
    return {
      batchId: 0,
      templateId: 0,
      tableTemp: null
    }
  },

  mounted() {
    console.log("FillStatisticalInfo::::", this.$route);
    this.batchId = this.$route.query.batchId;
    this.templateId = this.$route.query.templateId;
    this.getTemplateStructure();
  },

  methods: {
    // 获取模板结构
    getTemplateStructure() {
      let getStructure = this.$axios.get(`/api/statistics/template/get-template-structure?templateId=${this.templateId}`);
      let getStructureTableData = this.$axios.get(`/api/statistics/statistical-record/records?batchId=${this.batchId}`);
      Promise.all([getStructure, getStructureTableData])
        .then(resArr => {
          console.log(resArr);
          if (resArr[0].data.code === 200 && resArr[1].data.code === 200) {
            let templateStructureVo = resArr[0].data.data;
            let tableData = resArr[1].data.data;
            this.$nextTick(() => {
              this.tableTemp = randerTableUtil.renderTemplateOperationTable(templateStructureVo.tableStructure, templateStructureVo.props, tableData, "operation-table-contaienr");
            })
          }
        })
        .catch(err => console.log(err));
    },

    addOneRow() {
      this.tableTemp.addOneRow();
    },

    // 保存表数据
    saveTableData() {
      this.tableTemp.resetAllDataNoEdit();
      let tableData = this.tableTemp.getTableData();
      // 将数据转化为后端接收的格式
      let statisticalRecords = tableData.map(data => {
        if (data.id) {
          return {
            id: data.id,
            jsonTextObj: data
          }
        } else {
          return {
            batchId: this.batchId,
            templateId: this.templateId,
            jsonTextObj: data
          }
        }
      })
      console.log("statisticalRecords::::", statisticalRecords);
      this.$axios
        .post("/api/statistics/statistical-record/save-records", statisticalRecords)
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.$message.success("保存成功");
            // 刷新前端表数据
            this.getTemplateStructure() 
          }
        })
        .catch(err => console.log(err));
    },

    // 导出表数据
    exportRecords() {
      this.$axios.get(`/api/statistics/statistical-record/export-records?batchId=${this.batchId}&templateId=${this.templateId}`)
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            downloadUtil.download(res.data.data);
          }
        })
        .catch(err => {
          console.log(err);
        })
    },
    
    goBack() {
      this.$router.go(-1);
    }

  }
}
</script>

<style scoped>
.top-btn-container {
  padding: 10px 0;
}
</style>